<template>
  <div class="card" :key="item.id">
    <div class="card-title">
      <div class="photo fl"><nuxt-link class="photo-a" to="/my"><img src="/default-photo.jpg"/></nuxt-link></div>
      <div class="user-info fl">
        <div class="user-info-name"><nuxt-link class="usre-info-name-txt" to="/my">{{item.uAuthor.nickname}}</nuxt-link></div>
        <div class="user-info-time">{{item.createTime}}</div>
      </div>
      <div class="content-type fl">
        <span v-if="item.type === 1">问</span>
        <span v-if="item.type === 2">文</span>
      </div>
      <!--<div class="follow fr">-->
        <!--<span class="follow-btn space-btn">关注</span>-->
      <!--</div>-->
      <div class="cf"></div>
    </div>
    <div class="card-content">
      <nuxt-link :to="'/detail/' + item.id" class="card-cn-wrap">
        <div class="content-title">
          {{item.title.length > 30 ? item.title.substring(0, 30) + ' ……' : item.title}}
        </div>
        <div class="content-txt">
          {{item.content.length > 70 ? item.content.substring(0, 70) + ' ……' : item.content}}
        </div>
      </nuxt-link>
    </div>
  </div>

</template>
<script>
  export default {
    components: {},
    props: ['item'],
    methods: {
    }
  }
</script>
<style>
  .follow-btn {
    margin-right: 10px;
  }

  .content-type {
    margin-left: 10px;
    height: 35px;
  }

  .content-type span {
    padding: 0px 5px;
    background-color: #ececec;
    border-radius: 4px;
    color: #3d3d3d;
    margin-top: 18px;
  }

  .content-type span:hover {
    background-color: #13BA31;
    color: #ffffff;
  }

  .card {
    font-size: 1.25em;
    width: 98%;
    padding-right: 1%;
    padding-left: 1%;
  }

  .card > .card-title > .photo .photo-a > img {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    margin-right: 10px;
  }

  .card > .card-content .card-cn-wrap {
    margin-top: 10px;
    letter-spacing: 0.15em
  }

  .card .card-content .content-txt, .card .card-content .content-title {
    line-height: 25px;
  }

  .card .card-content .content-title {
    font-weight: 700;
    margin: 8px auto;
    font-size: 1.1em;
  }

  .card > .card-title > .user-info > .user-info-name > .usre-info-name-txt {
    font-weight: 600;
    color: #13BA31;
  }

</style>
